<template>
  <section>
      <el-card class="box-card">
        <el-row>
          <el-col :span="24">
            <el-form ref="searchVideoCondition" :model="searchVideoCondition" label-width="80px" inline>
              <el-form-item label="标题">
                <el-input v-model="searchVideoCondition.title" style="width: 300px;"/>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="primary" @click="save">确定</el-button>
              </el-form-item>
              <el-form-item> <el-tag v-if="multipleSelection.title" type="danger" style="margin-right: 10px;">当前选择：{{multipleSelection.title}}</el-tag></el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <el-table
          :data="videoList.content" border stripe
          style="width: 100%"
          ref="multipleTable"
          highlight-current-row
          @current-change="handleCurrentChange">
          <el-table-column
            prop="id"
            label="编号"
            width="55">
          </el-table-column>

          <el-table-column prop="title" label="题目" ></el-table-column>
        </el-table>
        <div class="mt10">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="videoList.totalElements"
            :page-size="videoList.size"
            :current-page.sync="currentVideoPage" @current-change="getPageChange">
          </el-pagination>
        </div>
      </el-card>
  </section>
</template>
<script>
import { mapGetters } from "vuex";
import Status from "@/libs/status";
export default {
  props: {
    isClose: Boolean,
    refresh: Boolean
  },
  created() {},
  mounted() {
    this.search();
    this.$watch("refresh", val => {
      this.search();
    });
  },
  data() {
    return {
      currentVideoPage: 1,
      showVideoEditor: false,
      VideoStatus: Status.VideoStatus,
      multipleSelection: {},
      searchVideoCondition: {
        pageIndex: 0,
        pageSize: 10,
        title: ""
      }
    };
  },
  computed: {
    ...mapGetters({
      videoList: "videoList",
      currentTask: "currentTask"
    }),
    quests() {
      return this.currentTask.quests;
    }
  },
  methods: {
    handleCurrentChange(val) {
      if (val) {
        this.multipleSelection = {};
        this.multipleSelection = { id: val.id, title: val.title };
      }
    },
    setCurrent(row) {
      this.$refs.multipleTable.setCurrentRow(row);
    },
    getPageChange(val) {
      console.log(this.searchVideoCondition, 22);
      var tem = Object.assign(
        { pageIndex: val - 1 },
        this.searchVideoCondition
      );
      this.$store.dispatch("getVideoPageS", tem).then(ret => {
        var data = ret.data.data.content;
        console.log(data);
        var tem = [];
        if (this.quests) {
          this.quests.map((item, index) => {
            data.map((item1, index1) => {
              if (item.id === item1.id) {
                tem.push(item1);
                this.setCurrent(item1);
              }
            });
          });
        }
      });
    },
    search() {
      this.getPageChange(1);
    },
    save() {
      if (this.multipleSelection.id > 0) {
        var tem = [];
        tem.push(this.multipleSelection);
        this.$store.dispatch("updateQuests", tem);
        this.back();
      } else {
        this.$message({
          message: "警告哦，至少选择一个题目",
          type: "warning"
        });
      }
    },
    back() {
      this.$emit("close");
    }
  },
  components: {}
};
</script>
<style scoped>
</style>
